<template>
  <div class="cardPage">
    <div v-if="loading" class="loading">
      <div  class="loading-spinner"></div>
    </div>
    <header>
      <h4>编号：{{ data.studentNo }}</h4>
      <h3>山西信息职业技术学院2025级新生报到卡</h3>
      <h5>
         <p>{{ data.studentName }}</p>同学
      </h5>
    </header>
    <section>
        欢迎来到山西信息职业技术学院！根据你选报的 <p>{{ data.majorName }}</p> 专业，你已被编入我院2025级<p>{{ data.deptName }}</p>系<p>{{ data.clazzName }}</p>班，请到以下部门报到办理有关入学手续。
    </section>
   <table frame="box" rules="all">
     <tr>
       <th>招生办</th>
       <td>签字（盖章）</td>
     </tr>
     <tr>
       <th>财务处</th>
       <td>签字（盖章）</td>
     </tr>
     <tr>
       <th>公寓用品</th>
       <td>签字（盖章）</td>
     </tr>
     <tr>
       <th>生活用品</th>
       <td>签字（盖章）</td>
     </tr>
   </table>
   <footer>
     <b>辅导员接收签字：</b> 
    <van-button round block type="primary" :loading="loadingBtn" loading-text="下载中..." @click="downLoadCar()">
     下载报道卡
    </van-button>
   </footer>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import { getClazzResult } from '@/api/login'; // 导入封装的 API 方法
import { Toast } from 'vant';
import axios from 'axios';
export default {
  name: 'App',
  setup() {
    const data = ref({});
    const loading = ref(true);
    const loadingBtn = ref(false);
    onMounted(() => {
      getInfo();
    });
    // 获取分班信息
    const getInfo = async () => {
      loading.value = true;
      try {
        const res = await getClazzResult(); // 调用封装的 API 方法
        console.log(res)
        if (res.code == 200) {   
          data.value = res.data;
          loading.value = false;
        }
      } catch (error) {
        Toast.fail('请求失败:', error);
        loading.value = false;
      }
    };
    // 下载报道卡
    const downLoadCar = async () => {
      try {
        const response = await axios.get('http://1.13.252.60:8080/student/confirm/reportCard/download', {
          responseType: 'blob',
          headers: {
            'User-Type': 'stu',
            'Authorization': localStorage.getItem('token')
          },
        });
        const link = document.createElement('a');
        const blob = new Blob([response.data], { type: 'application/msword' });
        const url = window.URL.createObjectURL(blob);
        const fileName = '报道卡.doc';
        link.href = url;
        link.setAttribute('download', fileName);
        link.style.display = 'none';
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        window.URL.revokeObjectURL(url);
      } catch (error) {
        console.error('下载失败', error);
      }
    };
    return {
      data,
      getInfo,
      downLoadCar,
      loading,
      loadingBtn
    };
  },
};
</script>

<style scoped>
html {
  font-size: 16px;
}
*{
  margin: 0;
  padding: 0;
  font-family: FZKTJW--GB1, FZKTJW--GB1;
}
.cardPage{
  max-width: 750px;
  height: auto;
  margin: 0 auto;
  background: #fff;
  overflow: hidden;
}
header{
  width: 88%;
  margin: 3rem auto 1.2rem;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
}
header h4{
  font-size: 1rem;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi
}
header h3{
  text-align: center;
  font-size: 1.12rem;
  padding: 1.25rem 0;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi
}
header h5{
  font-size: 1rem;
}
header h5 p,section p{
  padding: 0 1.25rem;
  display: inline-block;
  border-bottom: 2px solid #333;
  text-align: center;
}
section{
  width: 84%;
  margin: 0 auto;
  font-size: 0.875rem;
  line-height: 1.8;
  text-indent: 2em;
}
section p{
  text-indent: 0;
  padding: 0 2rem;
}
table{
  width: 80%;
  margin: 1.25rem auto 2.5rem;
}
table th{
  font-size: 0.875rem;
  padding: 3.125rem 0.937rem;
  font-weight: normal;
}
table td{
  font-size: 0.75rem;
  padding: 3.75rem 0 0 5rem;
  text-align: center;
}
footer{
  width: 60%;
  margin: 0 auto 2rem;
  font-family: AlibabaPuHuiTi, AlibabaPuHuiTi;
}
footer b{
  display: block;
  font-weight: 500;
  text-align: right;
  padding-right: 3.125rem;
}
footer button{
  border-radius: 7px;
  background: #0FB3E8;
  border: none;
  margin-top: 3.5rem;
  letter-spacing: 3px;
}
.loading {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(230, 253, 260, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 99;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.loading-spinner {
  position: relative;
  width: 6.625rem;
  height: 3.5rem;
  background-image: linear-gradient(#29d78b 3.125rem, transparent 0),
    linear-gradient(#29d78b 3.125rem, transparent 0),
    linear-gradient(#29d78b 3.125rem, transparent 0),
    linear-gradient(#29d78b 3.125rem, transparent 0),
    radial-gradient(circle 0.875rem, #29d78b 100%, transparent 0);
  background-size: 3rem 0.937rem, 0.937rem 2.1875rem, 0.937rem 2.1875rem, 1.5625rem 0.937rem, 1.75rem 1.75rem;
  background-position: 1.5625rem 0.3125rem, 3.625rem 1.25rem, 1.5625rem 1.0625rem, 0.125rem 2.3125rem, 4.75rem 0px;
  background-repeat: no-repeat;
  transform: rotate(-45deg);
}
.loading-spinner::after,.loading-spinner::before {
    content: "";
    position: absolute;
    left: -2.8125rem;
    top: -0.625rem;
    width: 3.5rem;
    height: 3.5rem;
    border: 0.375rem solid #29d78b;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-image: linear-gradient(#29d78b 4rem, transparent 0),
      linear-gradient(#29d78b 4.125rem, transparent 0),
      radial-gradient(circle 0.25rem, #29d78b 100%, transparent 0);
    background-size: 2.5rem 1px, 1px 2.5rem, 0.5rem 0.5rem;
    background-position: center center;
    -webkit-animation: rotation 0.3s linear infinite;
    animation: rotation 0.3s linear infinite;
  }
.loading-spinner::before{
  left: 1.5625rem;
  top: 3.75rem;
}  
</style>